<template>
    <el-dialog v-model="updateDialog" title="学生就业信息修改" width="800">
        <el-form :inline="true" class="demo-form-inline" ref="formRef" :rules="formRules" :model="formData">
            <el-row>
                <el-col :span="12">
                    <el-form-item label="学号" label-width="80" :required="true" prop="studentId">
                        <el-input autocomplete="off" v-model="formData.studentId" readonly/>
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="工作城市" label-width="80" :required="true" prop="workCity">
                        <el-input autocomplete="off" v-model="formData.workCity" />
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="工作公司" label-width="80" prop="workCompany">
                        <el-input autocomplete="off" v-model="formData.workCompany" />
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="工作岗位" label-width="80" prop="workPosition">
                        <el-input autocomplete="off" v-model="formData.workPosition" />
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="入职日期" label-width="80" prop="startDate">
                        <div class="block">
                            <el-date-picker v-model="formData.startDate" type="date" placeholder="请选择" :size="size"
                                format="YYYY/MM/DD" value-format="YYYY-MM-DD" />
                        </div>
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="离职日期" label-width="80" prop="endDate">
                        <div class="block">
                            <el-date-picker v-model="formData.endDate" type="date" placeholder="请选择" :size="size"
                                format="YYYY/MM/DD" value-format="YYYY-MM-DD" />
                        </div>
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="薪资" label-width="80" prop="salary">
                        <el-input autocomplete="off" v-model="formData.salary" />
                    </el-form-item>
                </el-col>

            </el-row>
        </el-form>
        <template #footer>
            <div class="dialog-footer">
                <el-button @click="updateDialog = false">关闭</el-button>
                <el-button @click="resetForm(formRef)">重置</el-button>
                <el-button @click="update()" type="primary">修改</el-button>
            </div>
        </template>
    </el-dialog>
</template>

<script setup>
import { defineEmits, defineModel } from "@vue/runtime-core";
import { reactive, ref } from "vue";
import axios from '@/axios/index.js'
import { ElMessage } from "element-plus";

let updateDialog = defineModel('updateDialog')
const emit = defineEmits(['loadEmploymentData'])
let rowData = defineProps(['rowData'])
const formRef = ref()

let formData = reactive({})

function demo() {
    formData.id = rowData.rowData.id,
    formData.studentId = rowData.rowData.studentId,
    formData.workCity = rowData.rowData.workCity,
    formData.workCompany = rowData.rowData.workCompany,
    formData.workPosition = rowData.rowData.workPosition,
    formData.startDate = rowData.rowData.startDate,
    formData.endDate = rowData.rowData.endDate,
    formData.salary = rowData.rowData.salary
}

demo()

// 表单校验规则  
const formRules = reactive({
    workCity: [
        { required: true, message: '工作城市不能为空', trigger: 'blur' }
    ],
    workCompany: [
        { required: true, message: '工作公司不能为空', trigger: 'blur' }
    ],
    workPosition: [
        { required: true, message: '工作岗位不能为空', trigger: 'blur' }
    ],
    startDate: [
        { required: true, type: 'date', message: '入职时间不能为空', trigger: 'blur' }
    ]
});

//保存修改
function update() {
    axios.post('/employment/updateEmploymentById', formData).then(resp => {
            ElMessage({
            message: resp.data.message,
            type:resp.data.code==200? 'success':"error",
            duration: 1500,
            onClose: function () {
                updateDialog.value = false
                emit('loadEmploymentData')
                resetForm()
            }
        })
        
    })
}

//重置表单校验
const resetForm = (formEl) => {
    demo()
    if (!formEl) return
    formEl.resetFields()
}
</script>

<style scoped>
.demo-form-inline {
    margin-left: 30px;
}

.demo-form-inline el-input {
    --el-input-width: 220px;
}

.demo-form-inline el-radio-group {
    --el-input-width: 220px;
}

.demo-form-inline el-date-picker {
    --el-input-width: 220px;
}

.avatar-uploader el-upload {
    border: 1px dashed var(--el-border-color);
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    transition: var(--el-transition-duration-fast);
}

.avatar-uploader el-upload:hover {
    border-color: var(--el-color-primary);
}

el-icon.avatar-uploader-icon {
    font-size: 20px;
    color: #8c939d;
    width: 40px;
    height: 40px;
    text-align: center;
}

.avatar-uploader .avatar {
    width: 40px;
    height: 40px;
    display: block;
}
</style>